<template>
  <div class="settings-page">
    <!-- <div class="fixed-title"><van-nav-bar title="设置" left-arrow @click-left="$router.back()" /></div> -->
    <h2>
      <span class="s1" @click="goBack"> <van-icon name="arrow-left" /> </span
      >设置
    </h2>
    <!-- 用户信息 -->

    <div class="section" @click="goToUserInfo">
      <div class="section-content">
        <div class="avatar">
          <img :src="avatarUrl" alt="用户头像" />
        </div>
        <div class="user-info">
          <div class="username">{{ username }}</div>
          <div class="account">{{ account }}</div>
        </div>
       
      </div>

    </div>
       <span v-if="!isLogged" class="login-tip" @click="goToLogin"><strong>马上登录</strong></span>

    <!-- 登录提示 -->
    

    <!-- 收货地址 -->
    <div class="section" @click="goToAddress">
      <div class="section-title">收货地址 <span class="arrow">></span></div>
    </div>

    <!-- 我的二维码 -->
    <div class="section" @click="goToQrcode">
      <div class="section-title">我的二维码 <span class="arrow">></span></div>
    </div>

    <!-- 登录密码设置 -->
    <div class="section" @click="goToPassword">
      <div class="section-title">登录密码设置 <span class="arrow">></span></div>
    </div>

    <!-- 支付方式设置 -->
    <div class="section" @click="goToPayment">
      <div class="section-title">支付方式设置 <span class="arrow">></span></div>
    </div>

    <!-- 消息推送设置 -->
    <!-- <div class="section" @click="goToNotification">
      <div class="section-title">消息推送设置 <span class="arrow">></span></div>
    </div> -->

    <!-- 隐私设置 -->
    <div class="section" @click="goToPrivacy">
      <div class="section-title">隐私设置 <span class="arrow">></span></div>
    </div>

    <!-- 其他设置 -->
    <div class="section" @click="goToOther">
      <div class="section-title">其他设置 <span class="arrow">></span></div>
    </div>

    <!-- 隐私政策简要版 -->
    <div class="section" @click="goToPrivacyPolicy">
      <div class="section-title">
        隐私政策简要版 <span class="arrow">></span>
      </div>
    </div>

  <!-- 清理缓存 -->

    <div class="section" @click="clearCacheConfirm">
    <div class="section-title">
      清理缓存 <span class="arrow cache-size">7.02M ></span>
    </div>
  </div>

    <!-- 关于我们 -->
    <div class="section">
      <router-link to="/about">
        <div class="section-title">
          关于我们 <span class="arrow">V4.48 ></span>
        </div>
      </router-link>
    </div>
    <div class="logout-btn" @click="logout">退出登录</div>
  </div>
</template>


<script>
import { Dialog } from 'vant';
export default {
  data() {
    return {
      isLogged: true,
      username: "user",
      account: "小明",
      avatarUrl:
        "http://mms0.baidu.com/it/u=1945914686,2244543485&fm=253&app=120&f=JPEG?w=664&h=457",
    };
  },

  methods: {
    // 点击请登录，跳转的位置
    goToLogin(){
      this.$router.push("/login");
     

    },
    // 返回上一级
    goBack() {
      this.$router.go(-1);
    },
    // 点击退出登录之后，用户名内容的改变
    logout() {
      this.isLogged = false;
      this.username = "";
      this.account = "";
      this.avatarUrl = "https://www.biaowu.com/img/default/not_loaded.jpg";
      
    },
    goToUserInfo() {
      // 跳转到用户信息页面
      this.$router.push("/userinfo");
    },
    goToAddress() {
      // 跳转到收货地址页面
      this.$router.push("/adress");
    },
    goToQrcode() {
      // 跳转到我的二维码页面
      this.$router.push("/qrcode");
    },
    goToPassword() {
      // 跳转到登录密码设置页面
      this.$router.push("/pass");
    },
    goToPayment() {
      // 跳转到支付方式设置页面
      this.$router.push("/payment");
    },

    goToPrivacy() {
      // 跳转到隐私设置页面
      this.$router.push("/privacy");
    },
    goToOther() {
      // 跳转到其他设置页面
      this.$router.push("/other");
    },
    goToPrivacyPolicy() {
      // 跳转到隐私政策简要版页面
      this.$router.push("/policy");
    },
    goToInfoCollection() {
      // 跳转到个人信息收集清单页面
      this.$router.push("/collection");
    },
    goToPermissions() {
      // 跳转到应用权限说明页面
      this.$router.push("/permissions");
    },

    clearCache() {},
    goToAbout() {
      // 跳转到关于我们页面
      this.$router.push("/about");
    },
    clearCacheConfirm() {
      Dialog.confirm({
        title: '确认要清除缓存吗？',
        // message: '弹窗内容',
      })
      .then(() => {
        // on confirm
        this.clearCache();

    // 更新显示的缓存大小为0
    const cacheSizeElement = document.querySelector('.cache-size');
    if (cacheSizeElement) {
      cacheSizeElement.innerText = '0';
          }
      })
      .catch(() => {
        // on cancel
      });
    },
    
    
  },
};
</script>

<style scoped>
.arrow {
  float: right;
}
.settings-page {
  padding: 20px;
}

.fixed-title {
  width: 100%;
  text-align: center;
  background-color: #fff;
  font-size: 20px;
  padding: 10px;
}

.section {
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 6px;
  padding: 15px;
  cursor: pointer;
}

.section-content {
  padding-top: 12px;
  display: flex;
  align-items: center; /* 垂直居中 */
}

.avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.user-info {
  margin-left: 10px;
}

.user-info .username {
  font-weight: bold;
}

.user-info .account {
  color: #999;
}
.logout-btn {
  text-align: center;
  background-color: #ff0000;
  color: #fff;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
}
.icon-arrow-left {
  float: left;
}
.login-tip {
  color: red;
  width: 100px;
  height: 200px;
  margin-top: 10px;
  margin-left: 16px;
}
</style>